<template>
	<view>
		<view class="" v-if="!show">
			<view class="title">
				欢迎使用小U课堂
			</view>

			<!-- #ifdef H5 -->
			<button class="btn" @click="tologin">使用手机号登录</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button class="btn" open-type="getPhoneNumber" @getphonenumber="towxlogin">使用微信登录</button>
			<!-- #endif -->
		</view>

		<view class="" v-else>



			<view class="mine">
				<!-- #ifdef H5 -->
				<image class="touxiang" :src="this.$img+user.avatarurl" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<image class="touxiang" :src="'http://localhost:3070/'+user.avatarurl" mode=""></image>
				<!-- #endif -->
				<view class="">
					<view class="">{{user.nickname}}</view>
					<view class="minee">请输入个性签名</view>
				</view>
				<view class="">
					<u-tag color="#ff6347" borderColor='#FF9999' text="每日签到" size="mini" icon="red-packet-fill"
						bgColor='#FF9999'></u-tag>
				</view>

			</view>
			<view class="">
				<ul class='_code'>
					<li v-for="item in list" :key="item.id">
						<view class="">{{item.num}}</view>
						<view class="">{{item.title}}</view>
					</li>
				</ul>
			</view>
			<view class="abc">
				<view class="ding">
					<view class="dings">
						<view class="">我的订单</view>
						<view>全部订单></view>
					</view>
					<view class="">
						<ul class='ul'>
							<li v-for="item in list1" :key="item.id">
								<view class="">
									<image class='imgg' :src="item.img" mode=""></image>
								</view>
								<view class="">{{item.name}}</view>
							</li>
						</ul>
					</view>
				</view>
			</view>
			<view class="abb"></view>
			<view class="">
				<u-cell-group>
					<u-cell icon='map' color='#ff6347' size="large" title="地址管理" isLink></u-cell>
					<u-cell icon='red-packet' color='#ff6347' size="large" title="我的钱包" isLink></u-cell>
					<u-cell icon='grid' color='#ff6347' size="large" title="我的二维码" isLink></u-cell>
					<u-cell icon='account-fill' color='#ff6347' size="large" title="我的小伙伴" isLink></u-cell>
					<u-cell icon='rmb-circle' color='#ff6347' size="large" title="0元试用" isLink></u-cell>
				</u-cell-group>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		wxLogin
	} from '../../rquest/api.js'
	import {
		getuser,
	} from '../../common/getuser.js'
	export default {
		data() {
			return {
				user: {
					phone: '',
					nickname: '',
					avatarurl: ''
				},
				show: false,
				list: [{
						id: 0,
						num: 12,
						title: '我的收藏'
					},
					{
						id: 1,
						num: 12,
						title: '浏览记录'
					},
					{
						id: 2,
						num: 0,
						title: '我的红包'
					},
					{
						id: 3,
						num: 12,
						title: '优惠价'
					}
				],
				list1: [{
						id: 0,
						img: require('../../static/images/1.png'),
						name: '待付款'
					},
					{
						id: 1,
						img: require('../../static/images/2.png'),
						name: '代发货'
					},
					{
						id: 2,
						img: require('../../static/images/3.png'),
						name: '待确认'
					},
					{
						id: 3,
						img: require('../../static/images/4.png'),
						name: '售后/退款'
					},

				],

			}
		},
		onLoad() {

		},
		onShow() {
			this.show = getuser()
			console.log(this.show);
			this.user = uni.getStorageSync('user')
			console.log(this.user);
		},
		methods: {
			towxlogin(e) {
				let _this =this
				const {
					iv,
					encryptedData
				} = e.detail
				console.log(e, 1111);
				if (e.detail.errMsg == "getPhoneNumber:fail user deny") {
					uni.showToast({
						title: '权限被拒绝~~',
						icon: 'error'
					})

				} else {
					wx.login({
						success(res) {
							console.log(res)
							wxLogin({
									code: res.code,
									iv,
									encryptedData
							})
							.then(res => {
									console.log(res, '登录成功');
									uni.setStorageSync('user',res.data.list)
									
									uni.switchTab({
										url:'../home/home'
									})
									this.show = getuser()
							})
							.catch(err => {
									console.log(err);
									
							})
						}
					})


				}



			},
			tologin() {
				uni.navigateTo({
					url: '../login/login'
				})
			}
		}

	}
</script>

<style lang="scss">
	.touxiang {
		border-radius: 50%;
	}

	.btn {
		background-color: #ff6347;
		color: #fff;
		width: 80%;
		margin-top: 90rpx;
	}

	.title {
		margin-top: 220rpx;
		font-size: 49rpx;
		color: #333;
		text-align: center;
	}

	.abb {
		height: 60px;
		background-color: #eee;
	}

	.abc {
		height: 80px;
		background-color: tomato;
		position: relative;
	}

	.ding {
		width: 90%;
		background-color: white;
		border-radius: 10px;
		position: absolute;
		left: 5%;
		z-index: 1;
	}

	.dings {
		display: flex;
		justify-content: space-between;
		padding: 5px;
		box-sizing: border-box;
		font-size: 18px;
		font-weight: bold;
		color: #000;
		align-items: center;
		padding: 20rpx;
	}

	.dings view:nth-child(2) {
		color: tomato;
		font-size: 14px;
	}

	.ul {
		display: flex;
		justify-content: space-around;
		padding: 20rpx;
	}

	.ul li {
		text-align: center;
	}

	.imgg {
		width: 43px;
		height: 43px;
	}

	._code {
		height: 136rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: tomato;
		color: #eee;
	}

	._code li {
		text-align: center;
	}

	.mine {
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: tomato;
	}

	.mine image {
		width: 80px;
		height: 80px;
	}

	.mine view:nth-child(2) {
		color: #eee;
	}

	.mine view:nth-child(2) .minee {
		border: 1px solid white;
		font-size: 29rpx;
		width: 130px;
		text-align: center;
		padding: 5rpx;
		box-sizing: border-box;
	}

	element.style {
		margin-right: 0;
		margin-top: 0;
		background-color: #fbd1d1;
		color: #ff6347;
		border-color: #FF9999;
		border-radius: 30rpx 0px 0px 30rpx !important;
	}
</style>
